<template>
  <div>
    <el-card class="box-card" v-if="type === 1">
      <question-list @edit="edit" @changeType="type = 2"></question-list>
    </el-card>
    <el-card class="box-card" v-else>
      <div slot="header" class="clearfix">
        <span>{{ title }}</span>
        <el-button
          style="float: right"
          size="small"
          type="primary"
          plain
          @click="type = 1"
          >返回列表</el-button
        >
      </div>
      <el-form
        label-position="right"
        label-width="120px"
        size="small"
        :rules="rules"
        :model="formData"
        ref="formData"
        style="marginright: 60px"
      >
        <el-row>
          <el-col :span="8">
            <el-form-item label="学科方向" prop="subject_id">
              <el-select
                v-model="formData.subject_id"
                placeholder="归属学科"
                clearable
                
              >
                <el-option
                  v-for="item in treeList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="目录信息" prop="directory_id">
              <el-select
                v-model="formData.directory_id"
                placeholder="归属目录"
                clearable
                
              >
                <el-option
                  v-for="item in directoryList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="标签信息" prop="tag_id">
              <el-select
                v-model="formData.tag_id"
                placeholder="技能标签"
                multiple
                clearable
              >
                <el-option
                  v-for="item in tagList"
                  :key="item.id"
                  :label="item.name"
                  :value="item.id"
                >
                </el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="试题难度" prop="difficulty">
              <el-radio-group v-model="formData.difficulty">
                <el-radio :label="1">中等</el-radio>
                <el-radio :label="2">困难</el-radio>
                <el-radio :label="3">较难</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item label="试题类型" prop="quest_type">
              <el-select
                v-model="formData.quest_type"
                placeholder="请选择题型"
                clearable
              >
                <el-option label="单选" :value="1"></el-option>
                <el-option label="多选" :value="2"></el-option>
                <el-option label="判断" :value="3"></el-option>
                <el-option label="简答" :value="4"></el-option>
              </el-select>
            </el-form-item>
          </el-col>
          <el-col :span="8">
            <el-form-item
              label="是否面试真题"
              prop="is_true_question"
              style="float: left"
            >
              <el-radio-group v-model="formData.is_true_question">
                <el-radio :label="1">是</el-radio>
                <el-radio :label="2">否</el-radio>
              </el-radio-group>
            </el-form-item>
          </el-col>
        </el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="题干信息" prop="question">
              <div>
                <wang-editor
                  :refName="box"
                  placeholder="请输入题干内容"
                  v-model="formData.question"
                ></wang-editor>
                <div :ref="box"></div>
              </div>
            </el-form-item> </el-col
        ></el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="试题答案" prop="checkList">
              <div v-if="formData.quest_type === ''">
                请选择试题类型，生成答案模板
              </div>
              <div v-else-if="formData.quest_type === 1">
                <el-checkbox-group
                  v-model="checkList"
                  :max="1"
                  @change="change"
                >
                  <el-table :data="tableData" border style="width: 100%">
                    <el-table-column prop="check" label="单选项" width="100">
                      <template slot-scope="scope">
                        <el-checkbox :label="scope.row.code"></el-checkbox>
                      </template>
                    </el-table-column>
                    <el-table-column prop="text" label="单选项内容">
                      <template slot-scope="scope">
                        <el-input
                          type="textarea"
                          v-model="scope.row.content"
                          placeholder="请输入选项内容"
                        ></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="address"
                      label="选项图片"
                      width="150"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="address"
                      label="操作"
                      width="150"
                      align="center"
                    >
                      <template
                        slot-scope="scope"
                        v-if="scope.row.id === tableData.length"
                      >
                        <el-tooltip
                          class="item"
                          effect="dark"
                          content="删除"
                          placement="top"
                        >
                          <el-button
                            icon="el-icon-delete"
                            type="danger"
                            circle
                            size="small"
                            @click="del(scope.row.id)"
                          ></el-button>
                        </el-tooltip>
                        <el-tooltip
                          class="item"
                          effect="dark"
                          content="添加"
                          placement="top"
                        >
                          <el-button
                            icon="el-icon-plus"
                            type="success"
                            circle
                            size="small"
                            @click="add(scope.row.id)"
                          ></el-button>
                        </el-tooltip>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-checkbox-group>
              </div>
              <div v-else-if="formData.quest_type === 2">
                <el-checkbox-group v-model="checkList" @change="change">
                  <el-table :data="tableData" border style="width: 100%">
                    <el-table-column prop="check" label="单选项" width="100">
                      <template slot-scope="scope">
                        <el-checkbox :label="scope.row.code"></el-checkbox>
                      </template>
                    </el-table-column>
                    <el-table-column prop="text" label="单选项内容">
                      <template slot-scope="scope">
                        <el-input
                          type="textarea"
                          v-model="scope.row.content"
                          placeholder="请输入选项内容"
                        ></el-input>
                      </template>
                    </el-table-column>
                    <el-table-column
                      prop="address"
                      label="选项图片"
                      width="150"
                    >
                    </el-table-column>
                    <el-table-column
                      prop="address"
                      label="操作"
                      width="150"
                      align="center"
                    >
                      <template
                        slot-scope="scope"
                        v-if="scope.row.id === tableData.length"
                      >
                        <el-tooltip
                          class="item"
                          effect="dark"
                          content="删除"
                          placement="top"
                        >
                          <el-button
                            icon="el-icon-delete"
                            type="danger"
                            circle
                            size="small"
                            @click="del(scope.row.id)"
                          ></el-button>
                        </el-tooltip>
                        <el-tooltip
                          class="item"
                          effect="dark"
                          content="添加"
                          placement="top"
                        >
                          <el-button
                            icon="el-icon-plus"
                            type="success"
                            circle
                            size="small"
                            @click="add(scope.row.id)"
                          ></el-button>
                        </el-tooltip>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-checkbox-group>
              </div>
              <div v-else-if="formData.quest_type === 3">
                <el-checkbox-group v-model="decideCheckList" :max="1">
                  <el-table :data="decideData" border stripe>
                    <el-table-column label="判断项">
                      <template slot-scope="scope">
                        <el-checkbox :label="scope.row.code"></el-checkbox>
                      </template>
                    </el-table-column>
                  </el-table>
                </el-checkbox-group>
              </div>
            </el-form-item> </el-col
        ></el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="答案解析">
              <div>
                <wang-editor
                  :refName="answer"
                  placeholder="请输入答案解析内容"
                  v-model="formData.quest_remark"
                ></wang-editor>
                <div :ref="answer"></div>
              </div>
            </el-form-item> </el-col
        ></el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="    ">
              <el-button type="primary" size="medium" @click="submitForm()"
                >提交</el-button
              >
              <el-button>取消</el-button>
            </el-form-item>
          </el-col></el-row
        >
      </el-form>
    </el-card>
  </div>
</template>

<script>
import questionList from "@/components/QuestionList";
import WangEditor from "@/components/WangEditor";
import {
  getTreeList,
  addQuestionList,
  getQuestion,
  putQuestion,
} from "@/api/exam/question";
export default {
  name: "Question",
  components: { questionList, WangEditor },
  data() {
    return {
      type: 1,
      treeList: [],
      formData: {
        difficulty: 1,
        directory_id: 7,
        is_true_question: 1,
        quest_answer: "",
        quest_options: [],
        quest_remark: "",
        quest_type: "",
        question: "",
        subject_id: 1,
        tag_id: [],
      },
      box: "box",
      answer: "answer",
      rules: {
        subject_id: [
          { required: true, message: "请选择学科名称", trigger: "blur" },
        ],
        directory_id: [
          { required: true, message: "请选择目录名称", trigger: "blur" },
        ],
        tag_id: [{ required: true, message: "请选择标签", trigger: "blur" }],
        difficulty: [
          { required: true, message: "请选择难易度", trigger: "blur" },
        ],
        quest_type: [{ required: true, message: "请选择类型", trigger: "blur" }],
        is_true_question: [{ required: true, trigger: "blur" }],
        question: [{ required: true,message: "请输入题干内容", trigger: "blur" }],
      },
      checkList: [],
      decideCheckList: [],
      tableData: [
        {
          id: 1,
          code: "A",
          content: "",
          is_true: false,
          pic: "",
        },
        {
          id: 2,
          code: "B",
          content: "",
          is_true: false,
          pic: "",
        },
        {
          id: 3,
          code: "C",
          content: "",
          is_true: false,
          pic: "",
        },
        {
          id: 4,
          code: "D",
          content: "",
          is_true: false,
          pic: "",
        },
      ],
      decideData: [
        {
          code: "正确",
          content: "",
          is_true: false,
        },
        {
          code: "错误",
          content: "",
          is_true: false,
        },
      ],
    };
  },
  computed: {
    title() {
      if (this.type === 2) return "新增试题";
      if (this.type === 3) return "修改试题";
    },
    directoryList() {
      // 目录信息
      if (!this.formData.subject_id) {
        return [];
      } else {
        // eslint-disable-next-line vue/no-side-effects-in-computed-properties
        this.formData.directory_id = "";
        const result = this.treeList.find((val) => {
          return val.id == this.formData.subject_id;
        });
        return result.children;
      }
    },
    tagList() {
      // 标签信息
      if (this.formData.subject_id && this.formData.directory_id) {
        // 取出一级
        const top = this.treeList.find(
          (val) => val.id == this.formData.subject_id
        );
        // 取出二级
        const child = top.children.find(
          (val) => val.id == this.formData.directory_id
        );
        return child.children;
      } else {
        return [];
      }
    },
  },
  mounted() {},
  created() {
    this.getTreeList();
  },
  methods: {
    async getTreeList() {
      try {
        const res = await getTreeList();
        console.log(res);
        this.treeList = res.data;
      } catch (error) {
        console.log(error);
      }
    },
    del(id) {
      if (this.tableData.length === 1) {
        return this.$message.error("请添加选项");
      }
      this.tableData.pop(id - 1, 1);
    },
    add(id) {
      if (id === 6) {
        return this.$message.error("最多只能添加6条");
      }
      const Aarray = ["A", "B", "C", "D", "E", "F"];
      this.tableData.push({
        id: id + 1,
        code: Aarray[id],
        content: "",
        is_true: true,
        pic: "",
      });
    },
    change() {
      this.tableData = this.tableData.map((item) => {
        item.is_true = this.checkList.includes(item.code);
        return item;
      });
    },
    submitForm() {
      this.$refs.formData.validate(async (valid) => {
        console.log(123);
        console.log(this.formData.quest_type);
        if (this.formData.quest_type === 1 || this.formData.quest_type === 2) {
          this.formData.quest_answer = this.checkList.join(",");
          this.tableData = this.tableData.map((item) => {
            delete item.id;
            return item;
          });
          console.log(this.tableData);
          this.formData.quest_options = this.tableData;
          console.log(this.formData.quest_answer);
        } else if (this.formData.quest_type === 3) {
          this.formData.quest_answer = this.decideCheckList.join(",");
          this.formData.quest_options = this.decideData;
        }
        if (this.type === 2) {
          const res = await addQuestionList(this.formData);
          this.$message.success("添加成功");
          this.type = 1;
        }
        if (this.type === 3) {
          console.log(this.questId);
          this.editFormData = {
            ...this.editFormData,
            ...this.formData,
          };
          const res = await putQuestion(this.questId, this.editFormData);
          this.$message.success("修改成功");
          this.type = 1;
        }
      });
    },
    async edit(id) {
      this.type = 3;
      this.questId = id;
      console.log(this.questId);

      console.log(id);
      const res = await getQuestion(id);
      console.log(res.data);
      this.editFormData = res.data;
      for (var key in this.formData) {
        this.formData[key] = res.data[key];
      }
      this.decideCheckList = [];
      this.decideCheckList.push(...this.formData.quest_answer.split(","));
      this.checkList = [];
      this.checkList.push(...this.formData.quest_answer.split(","));
      this.formData.tag_id = this.formData.tag_id.split(",");

      this.tableData = this.tableData.map((item, index) => {
        item = {
          ...item,
          ...JSON.parse(this.formData.quest_options)[index],
        };
        return item;
      });
      console.log(this.tableData);
    },
  },
};
</script>

<style>
body {
  background-color: #eaedf1;
}
.box-card {
  margin: 20px;
}
.el-card__header {
  padding: 10px 20px;
  font-weight: bold;
  line-height: 32px;
}
</style>
